<script setup>
import temblorCanteen from "@/api/temblor/temblorCanteen.js";
import {onMounted, ref} from "vue";

const loading = ref(true)
const data = ref([])
const date = ref('')
const getEatDate = async () => {
  const res = await temblorCanteen.eatDate({
    date: date.value
  })
  data.value = res.data
  loading.value = false
}
onMounted(() => {
  getEatDate()
})
const columns = [
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '吃饭日期',
    dataIndex: 'dates'
  }
]
const changeDate = () => {
  getEatDate()
}
</script>

<template>
  <a-card>
    <a-layout>
      <a-month-picker style="width: 200px;" @change="changeDate" v-model="date"/>
      <a-spin class="mt-3" :loading="loading">
        <a-table :data="data" :columns="columns">
        </a-table>
      </a-spin>
    </a-layout>
  </a-card>
</template>

<style scoped>

</style>